<template>
	<view class="bg-F5F5F5" style="height: 100vh;  padding-bottom: 20rpx;">
		<x-shoopDetails @daohangs="daohangs" :name="list.status_name" :pay_fee="list.pay_fee" :price="list.total_amount"
			:province="`${list.store_info.province_name}${list.store_info.city_name}${list.store_info.area_name}`"
			:order_sn="list.order_sn" :createtime="list.createtime" :pay_type="list.pay_type">
			<view class="" slot="shoop">
				<x-did-title :name="list.store_info.store_name">
					<!-- 后端说不好判断去掉 -->
					<!-- <view class=" fs-26 fw-400 c-77" v-if="name=='已取消'">
						未退款
					</view> -->
					<!-- <view class="flex aj-center fs-26 fw-400 c-77" v-if="name!='已取消'" @click="phonepeople"> -->
					<view class="flex aj-center fs-26 fw-400 c-77" @click="phonepeople">
						<view class="mr-6" style="width: 28rpx;height: 28rpx;">
							<image src="../static/doct/dianhua.png" mode=""></image>
						</view>
						<view class="f-26 fw-400 c-11">
							联系门店
						</view>
					</view>

				</x-did-title>
				<x-StayToThe v-for="(item,index) in list.order_item" :key="index" :img="item.goods_image"
					:price="item.goods_price" :title="item.goods_title" :num="item.goods_num" />

			</view>

			<!-- <view class="aj-center " @click="quxi" slot="qxddan" v-if="name=='待自提'" -->
			<view class="aj-center " @click="quxi" slot="qxddan" v-if="list.status==1"
				style="width: 174rpx;height: 60rpx;border: 1px solid #707070;border-radius: 50px;">
				取消订单
			</view>
		</x-shoopDetails>
		<u-popup v-model="show" mode="bottom" border-radius="14" closeable @close="ok">
			<view style="margin-top: 34rpx;margin-bottom: 30rpx;" class="aj-center f-30 f-bold c-11">
				取消订单
			</view>
			<view class="px-28 fw-400 c-77 f-30">
				<view class="py-40  just-between just-yc  border-b-DDDDDD" v-for="(item , index) in detailList"
					:key="item.id" @click="alltitle(item)" :class="active==item.id?'c-BC8D55':'c-77'">
					<view class="">
						{{item.title}}
					</view>
					<view class="" v-if="active==item.id">
						✔
					</view>
				</view>
				<!-- <view class="py-40 just-yc  border-b-DDDDDD">
					商品选错/多选/漏选了
				</view>
				<view class="py-40 just-yc border-b-DDDDDD">
					其他
				</view> -->
			</view>
			<view class="mx-60 fw-400 f-26  mt-50 mb-30 linear-EECB89 c-FFFFFF aj-center"
				style="width: 630rpx; height: 80rpx;border-radius: 80px;" @click.once="ok">
				确定
			</view>
		</u-popup>

		<u-popup v-model="people" mode="center" border-radius="14" width="470rpx">
			<view class="aj-center f-30 f-bold c-11" style="margin-top: 38rpx;margin-bottom: 46rpx;">
				联系门店
			</view>
			<view class="aj-center c-BC8D55 f-30 f-bold" style="margin-bottom: 34rpx;">
				{{phone | phones}}
			</view>
			<view class="border-b-EEEEEE">

			</view>
			<view class="mx-60 flex" style="margin-top: 38rpx;margin-bottom: 42rpx;">
				<view class="mr-30    bor-r50 aj-center" style="width: 160rpx;border: 1px solid #707070; height: 66rpx;"
					@click="phonepeople">
					取消
				</view>
				<view class="bg-DFB982 c-FFFFFF bor-r50 aj-center" style="width: 160rpx; height: 66rpx;" @click="boda">
					拨打
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {
					latitude: 5465468,
					longitude: 156465,
					name: '',
				},
				order_note: '', //退款原因
				order_id: '', //订单id
				phone: '', //手机号
				payTypemony: {
					wallet: '余额支付',
					wechat: '微信支付',
					alipay: '支付宝支付',
					iospay: 'ApplePay'
				},
				pay_type: '',
				itemobj: null,
				name: '',
				show: false,
				people: false,
				active: -1,
				list: [], //详情数据
				detailList: [{
						id: 1,
						title: "临时不想要了"
					},
					{
						id: 2,
						title: "	商品选错/多选/漏选了"
					},
					{
						id: 3,
						title: "	其他"
					},
				]
			}
		},

		onLoad(options) {
			this.order_id = options.id;
			console.log(options.id, 'options111')

			// console.log(JSON.parse(options),'options111')
			// this.itemobj=options.items;
			// this.id = options.id;
			// if (this.id == 0) {
			// 	this.name = '待自提'
			// } else if (this.id == 1) {
			// 	this.name = "已完成"
			// } else {
			// 	this.name = "已取消"
			// }
		},
		filters: {
			phones(num) {
				console.log(num, 'numnumnumnumnumnumnum')
				var a = num;
				var cc = a.split('');
				cc['3'] = '*';
				cc['4'] = '*';
				cc['5'] = '*';
				cc['6'] = '*';
				return cc.join('')
			}
		},
		onShow() {
			// uni.getStorage({
			// 	key: 'detailitem',
			// 	success: res => {
			// 		this.itemobj = JSON.parse(res.data)
			// 		this.name = this.itemobj.status_name
			// 		console.log(this.itemobj);

			// 	}
			// });
			this.selfetcDetail()

		},
		methods: {
			daohangs() {
				// #ifndef MP-WEIXIN
				return uni.showToast({
					icon: 'none',
					mask: true,
					title: '请在微信内运行',
				});
				// #endif
				//  经纬度暂时写死看效果，后边根据接口返回的地址去打开导航
				let latitude = Number(this.detail.latitude);
				let longitude = Number(this.detail.longitude);
				let address = this.detail.name;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					address: address,
					// 缩放大小
					scale: 18,
					success: function() {
						console.log('成功的回调success');
					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			// 订单详情  -------------待定
			selfetcDetail() {
				this.$https('doctindex.selfetcDetail', {
					order_id: this.order_id,

				}).then(res => {
					console.log(res, 'res=-=====-------')
					this.list = res.data;
				
					this.phone = this.list.phone;
				})
			},
			quxi() {
				this.show = true;
			},
			ok() {
				this.show = false;
				this.active = -1;
				this.$https('doctindex.orderCancel', {
					order_id: this.order_id,
					order_note: this.order_note
				}).then(res => {
					if (res.data.cancel_status == 0) {
						this.$u.toast(msg);
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 2000)

					}
				})

			},
			alltitle(item) {
				this.active = item.id;
				this.order_note = item.title;
				console.log(index)
			},
			phonepeople() {
				this.people = !this.people
			},
			boda() {
				uni.makePhoneCall({
					phoneNumber: this.phone //仅为示例
				});
			},
		}
	}
</script>

<style scoped>
	@import url("@/common/css/fress.css");
	@import url("@/common/css/mycss.css");
</style>
